import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:moose_app/ui/values/values.dart';

import 'detail_user_info.dart';

class SliverDetailAuthorHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double collapsedHeight;
  final double expandedHeight;
  final double paddingTop;
  final String coverImgUrl;
  final String title;
  String statusBarMode = 'dark';

  SliverDetailAuthorHeaderDelegate({
    this.collapsedHeight,
    this.expandedHeight,
    this.paddingTop,
    this.coverImgUrl,
    this.title,
  });

  @override
  double get minExtent => this.collapsedHeight + this.paddingTop;

  @override
  double get maxExtent => this.expandedHeight;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }

  void updateStatusBarBrightness(shrinkOffset) {
    if (shrinkOffset > 50 && this.statusBarMode == 'dark') {
      this.statusBarMode = 'light';
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarBrightness: Brightness.light,
        statusBarIconBrightness: Brightness.light,
      ));
    } else if (shrinkOffset <= 50 && this.statusBarMode == 'light') {
      this.statusBarMode = 'dark';
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarBrightness: Brightness.dark,
        statusBarIconBrightness: Brightness.dark,
      ));
    }
  }

  Color makeStickyHeaderBgColor(shrinkOffset) {
    final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255)
        .clamp(0, 255)
        .toInt();
    return Color.fromARGB(alpha, 255, 255, 255);
  }

  Color makeStickyHeaderTextColor(shrinkOffset, isIcon) {
    if (shrinkOffset <= 50) {
      return isIcon ? Colors.white : Colors.transparent;
    } else {
      final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255)
          .clamp(0, 255)
          .toInt();
      return Color.fromARGB(alpha, 0, 0, 0);
    }
  }

  Color makeStickyHeaderFollowTextColor(shrinkOffset) {
    final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255)
        .clamp(0, 255)
        .toInt();
    return Colors.white.withAlpha(alpha);
  }

  Color makeStickyHeaderFollowButtonColor(shrinkOffset) {
    final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255)
        .clamp(0, 255)
        .toInt();
    return kColorEB3F4A.withAlpha(alpha);
  }

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    this.updateStatusBarBrightness(shrinkOffset);
    return Container(
      height: this.maxExtent,
      width: MediaQuery.of(context).size.width,
      child: _buildStack(context, shrinkOffset),
    );
  }

  Widget _buildStack(context, shrinkOffset) {
    return Stack(
      fit: StackFit.expand,
      children: <Widget>[
        Container(
            child: CachedNetworkImage(
                imageUrl: this.coverImgUrl, fit: BoxFit.cover)),
        Positioned(
          left: 0,
          top: this.maxExtent / 2,
          right: 0,
          bottom: 0,
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color(0x00000000),
                  Color(0x99000000),
                ],
              ),
            ),
          ),
        ),
        Positioned(top: kSize160 - shrinkOffset, child: ATHDetailUserInfo()),
        Positioned(
          left: 0,
          right: 0,
          top: 0,
          child: Container(
            color: this.makeStickyHeaderBgColor(shrinkOffset),
            child: SafeArea(
              bottom: false,
              child: Container(
                height: this.collapsedHeight,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    IconButton(
                      icon: Icon(
                        Icons.arrow_back_ios,
                        color:
                            this.makeStickyHeaderTextColor(shrinkOffset, true),
                      ),
                      onPressed: () => Navigator.pop(context),
                    ),
                    Expanded(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Flexible(
                            child: Center(
                              child: Text(
                                this.title,
                                style: TextStyle(
                                  fontSize: kFontSize36,
                                  fontWeight: FontWeight.w500,
                                  color: this.makeStickyHeaderTextColor(
                                      shrinkOffset, false),
                                ),
                              ),
                            ),
                          ),
                          Container(
                              width: kSize160,
                              height: kSize50,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color: this.makeStickyHeaderFollowButtonColor(
                                      shrinkOffset),
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(kSize80))),
                              child: Text(
                                "关注",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: this.makeStickyHeaderFollowTextColor(
                                        shrinkOffset),
                                    fontSize: kFontSize30),
                              ))
                        ],
                      ),
                    ),
                    IconButton(
                      icon: Icon(
                        Icons.more_horiz,
                        color:
                            this.makeStickyHeaderTextColor(shrinkOffset, true),
                      ),
                      onPressed: () {},
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}
